<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>签到领积分</title>
    <style>
        .qd-head li{
            width:14.28%;
            float: left;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
<div class="wrap-sign">
    <div class="header">
        <p>签到领积分</p>
        <img src="__STATIC__/img/back.png" class="back" onclick =window.location.href="{:url('mobile/Index/index')}";>
    </div>
    <div class="center">
        <img src="__STATIC__/img/zq-jifenbeijing.png">
        <div class="title"><a href="javascript:signing();">立即签到</a></div>
        <div class="integral" style="display: none;">今日签到积分+<font id="jiFen">{$web_sign}</font> </div>
    </div>
    <div class="total">
        <p>我的总积分:<font id="totalJiFen">{$integral}</font></p>
    </div>
    <div class="date">
        <div>
            <div style="width: 100%">
                <img src="__STATIC__/img/date.png" style="margin-left: 30%" >
                <span style="margin-left: 5%;" class="current-date"></span>
            </div>
        </div>
        <div style="width: 98%;margin: 0 auto;">
            <ul class="qd-head" id="js-qd-head">
                <li>周日</li>
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
            </ul>
            <ul class="qd-list" id="js-qd-list"></ul>
        </div>
    </div>
</div>
<script src="__STATIC__/js/layer_mobile/layer.js"></script>
<script>
    $(function() {
        //ajax获取后台签到日期
        function sign() {
            var dateArray = [];
            $.ajax({
                url:'',
                type:'post',
                dataType:'json',
                data:{'act':'getSign'},
                async:false,
                success:function (t) {
                    dateArray = t;
                    console.log(t);
                },
                error: function () {
                    layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                }
            });
            return dateArray;
        }
        var signFun = function() {
            var arr = sign(); // 假设已经签到的
            var dateArray = [];
            for(var item in arr){
                dateArray.push(arr[item]);
            }
            var $dateBox = $("#js-qd-list"),
                    _html = '',
                    _handle = true,
                    myDate = new Date();
            //生成今日的时间
            $(".current-date").text(myDate.getFullYear() + '-' + parseInt(myDate.getMonth() + 1) + '-' + myDate.getDate());
            //这个月的第一天为周几
            var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();

            var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);

            var totalDay = d.getDate(); //获取当前月的总天数
            for (var i = 0; i < 42; i++) {
                _html += ' <li></li>'
            }
            $dateBox.html(_html) //生成日历网格

            var $dateLi = $dateBox.find("li");
            for (var i = 0; i < totalDay; i++) {
                $dateLi.eq(i + monthFirst).text(parseInt(i + 1)).addClass("date" + parseInt(i + 1));
                for (var j = 0; j < dateArray.length; j++) {
                    if (i == dateArray[j]) {
                        $dateLi.eq(i + monthFirst-1).addClass("sign");
                    }
                }
            } //生成当月的日历且含已签到
            $(".date" + myDate.getDate()).addClass('today');
        }();
        //元素正方形设置
        var width = $('.qd-list').find('li:first').width();
        $('ul li').each(function (i,o) {
            $(o).css('height',width+'px');
            $(o).css('line-height',width+'px');
        })
    })
    //执行签到
    function signing(){
        var total = $('#totalJiFen');
        $.ajax({
            url:'',
            type:'post',
            dataType:'json',
            data:{'act':'signing'},
            success:function (t) {
                if (t.code == 200){  //签到成功
                    $('.integral').css('display','block');
                    $('.today').css({'background':"url('__STATIC__/img_user/bg0.png') no-repeat center",'color':'white'})
//                    total.text(parseInt(total.text())+parseInt($('#jiFen').text()));
                    layer.open({content:t.message,skin:'msg',time:2});
                    location.reload();
                }else if (t.code == 404){  //非会员进行签到
                    layer.open({
                        content: '您还未登录'
                        ,btn: ['去登录', '取消']
                        ,yes: function(index){
                            window.location.href="{:url('mobile/user_port/login')}";
                            layer.close(index);
                        }
                    });
                }else{
                    layer.open({content:t.message,skin:'msg',time:2})
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        })
    }
</script>
</body>
</html>